<template>
  <div style="display: inline-block;" >
    <el-button type="success" class="buttoncss" @click="getTree()" >权限</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="权限管理" >
      <el-form ref="row_data" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"/>
        <el-tree
          v-loading="loading"
          ref="tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          show-checkbox
          node-key="id"
          default-expand-all
        />
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即修改</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { getPage } from '@/api/shop_admin_auth/adminPage'
import { editPermission, getPageId } from '@/api/shop_admin_auth/shopRole'
import store from '@/store'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Number,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      ger_role_id: '',
      merge: [],
      role_id: '',
      data2: [],
      data: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      son: {},
      parent: {},
      loading: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created: function() {
    this.role_id = this.row_data
    console.log('data---', this.role_id)
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },
    setCheckedNodes() {
      // this.$refs.tree.setCheckedNodes()
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys(this.ger_role_id)
    },
    submitForm() {
      // this.merge.concat(this.$refs.tree.getCheckedKeys(), this.$refs.tree.getHalfCheckedKeys())
      console.log('this.$refs.tree.getCheckedNodes', this.$refs.tree.getCheckedNodes())
      console.log('data[0]', this.row_data)
      console.log('defaultProps', this.defaultProps)
      // shop_page_id = v-for

      var form_data = {
        shop_page_id: this.$refs.tree.getCheckedNodes(),
        shop_role_id: this.row_data
      }

      editPermission(store.getters.token, form_data).then(res => {
        this.$emit('editPermission')
        this.close()
      })
    },
    getTree() {
      const that = this
      console.log('this.editData122', this.role_id)
      // const that = this
      this.dialogTableVisible = true
      getPageId(store.getters.token, { shop_role_id: this.row_data }).then(res => {
        this.ger_role_id = res.data.list
        that.setCheckedKeys()
        console.log('this.ger_role_id', this.ger_role_id)
        // this.$emit('getPageId')
      })

      getPage(store.getters.token, { parent_id: this.row_data }).then(response => {
        // console.log(this.row_data.id)
        var tree = response.data.data
        this.data2 = tree
        // 创建一个根节点数组，将数据添加进去
        this.data = [{
          id: 0,
          title: '全部',
          children: this.data2
        }]
        console.log('qqqqqq', this.data2)
        console.log('eeeeeeeeee', this.data)
        this.loading = false
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    allowDrop(draggingNode, dropNode, type) {
      return true
    },
    allowDrag(draggingNode) {
      return true
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
